<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>排行榜</title>
  <link rel="stylesheet" href="styles/icon.css">
  <style>
    body { width:350px; font-family:"Microsoft YaHei", sans-serif; background:#f5f5f5; }
    .header { background:#e02020; color:#fff; text-align:center; padding:12px; font-size:18px; font-weight:bold; }

    /* 顶部切换 */
    .tabs { display:flex; background:#e02020; justify-content:center; }
    .tabs div { flex:1; text-align:center; padding:10px 0; color:#fff; font-size:14px; cursor:pointer; }
    .tabs div.active { background:#c81515; border-radius:20px; margin:5px; }

    /* 二级筛选 */
    .sub-tabs { display:flex; gap:10px; padding:10px; background:#fff; border-bottom:1px solid #eee; }
    .sub-tabs div { padding:6px 14px; border-radius:16px; font-size:13px; cursor:pointer; background:#f5f5f5; color:#666; }
    .sub-tabs div.active { background:#e02020; color:#fff; font-weight:bold; }

    /* 内容区 */
    .content { padding:10px; }

    /* 卡片 */
    .card { background:#fff; border-radius:10px; margin-bottom:12px; overflow:hidden; box-shadow:0 2px 5px rgba(0,0,0,.1); }
    .card-top { position:relative; }
    .badge { position:absolute; top:6px; left:6px; width:50px; }
    .badge img { width:100%; display:block; }
    .card-top img.cover { width:100%; height:160px; object-fit:cover; display:block; }

    .card-body { padding:10px; }
    .card-body h3 { margin:0; font-size:14px; color:#333; line-height:1.5; }
    .tag { color:#e02020; font-size:12px; margin-top:4px; }

    .meta { display:flex; justify-content:flex-start; gap:12px; font-size:12px; color:#999; margin-top:6px; }
    .meta span { display:flex; align-items:center; gap:4px; }
    .meta i { font-size:14px; }
  </style>
</head>
<body>
  <!-- 顶部标题 -->
  <div class="header">排行榜</div>
  
  <!-- 一级标签 -->
  <div class="tabs">
    <div class="active">好文精选</div>
    <div>热门资讯</div>
  </div>

  <!-- 二级筛选标签 -->
  <div class="sub-tabs">
    <div class="active">文章</div>
  </div>

  <!-- 内容区 -->
  <div class="content">
    <!-- 卡片1 -->
    <div class="card">
      <div class="card-top">
        <div class="badge"><img src="./imgs/rank-top1.png" alt="TOP1"></div>
        <img src="./imgs/01.jpg" alt="封面1" class="cover">
      </div>
      <div class="card-body">
        <h3>安卓电视通过 KODI 看 IPTV</h3>
        <div class="meta">
          <span><i class="iconfont icon-comment"></i>105</span>
          <span><i class="iconfont icon-thumb"></i>345</span>
        </div>
      </div>
    </div>

    <!-- 卡片2 -->
    <div class="card">
      <div class="card-top">
        <div class="badge"><img src="./imgs/rank-top2.png" alt="TOP2"></div>
        <img src="./imgs/02.jpg" alt="封面2" class="cover">
      </div>
      <div class="card-body">
        <h3>起跑线26期：5km跑步，你到了哪一级别？学会这几个跑步技巧，助你提升PB</h3>
        <div class="tag">跑者</div>
        <div class="meta">
          <span><i class="iconfont icon-comment"></i>151</span>
          <span><i class="iconfont icon-thumb"></i>132</span>
        </div>
      </div>
    </div>

    <!-- 卡片3 -->
    <div class="card">
      <div class="card-top">
        <div class="badge"><img src="./imgs/rank-top3.png" alt="TOP3"></div>
        <img src="01.png" alt="封面3" class="cover">
      </div>
      <div class="card-body">
        <h3>示例内容3</h3>
        <div class="meta">
          <span><i class="iconfont icon-comment"></i>88</span>
          <span><i class="iconfont icon-thumb"></i>66</span>
        </div>
      </div>
    </div>

    <!-- 卡片4 -->
    <div class="card">
      <div class="card-top">
        <div class="badge"><img src="./imgs/rank-top4.png" alt="TOP4"></div>
        <img src="01.png" alt="封面4" class="cover">
      </div>
      <div class="card-body">
        <h3>示例内容4</h3>
        <div class="meta">
          <span><i class="iconfont icon-pinglun"></i>45</span>
          <span><i class="iconfont icon-dianzan"></i>80</span>
        </div>
      </div>
    </div>

    <!-- 卡片5 -->
    <div class="card">
      <div class="card-top">
        <div class="badge"><img src="./imgs/rank-top5.png" alt="TOP5"></div>
        <img src="01.png" alt="封面5" class="cover">
      </div>
      <div class="card-body">
        <h3>示例内容5</h3>
        <div class="meta">
          <span><i class="iconfont icon-pinglun"></i>23</span>
          <span><i class="iconfont icon-dianzan"></i>54</span>
        </div>
      </div>
    </div>
  </div>
</body>
</html>